<template>
    <div class="addym">
        <el-card>
            <el-form :model="form">

                <el-form-item label="人群名称" prop="name">
                    <el-input placeholder="请输入" v-model="form.segmentName" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item label="满足条件" prop="mztj">
                    <div style="    display: inline-block;">
                        <div v-for="(item, index) in list" :key="index">
                            <div>
                                <el-select style="margin-right: 10px;" v-model="item.value1"
                                    @change="changelist(item, index)">
                                    <el-option label="人口属性" value="人口属性"></el-option>
                                    <el-option label="行为属性" value="行为属性"></el-option>
                                    <el-option label="风险控制" value="风险控制"></el-option>

                                </el-select>
                                <el-select style="margin-right: 10px;" @change="changelist1(item, index)"
                                    v-model="item.value2">
                                    <el-option v-for="(item, index) in list2" :key="index" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                                <el-select style="margin-right: 10px;" v-model="item.value3">
                                    <el-option v-for="(item, index) in list3" :key="index" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                                <el-input v-model="item.value4" placeholder="请输入条件" style="width: 200px;"></el-input>
                                <el-button type="primary" plain v-if="index == list.length - 1"
                                    @click="addtianjian(item, index)" style="margin-left: 10px;">添加条件</el-button>
                                </div>
                            <div style="text-align: center;" v-if="item.guanxi !== ''">
                                <el-divider direction="vertical"></el-divider>
                                <div @click="changeguanxi(item.guanxi, index)"
                                    style="width:25px;height: 25px;margin: 0 auto ;background: #0376bf;line-height:25px; text-align: center; border-radius: 50%;color: #fff;">
                                    {{ item.guanxi }}</div>
                                <el-divider direction="vertical"></el-divider>
                            </div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="人口数量" prop="count">
                    <div>
                        <el-button plain type="primary" @click="jisuancount()">计算数量</el-button>
                        {{ count }}
                    </div>
                </el-form-item>
                <el-form-item label="推送设置" prop="name">
                    <el-select v-model="form.pushStatus">
                        <el-option label="消息通知" value="消息通知"></el-option>
                        <el-option label="电子邮件" value="电子邮件"></el-option>
                        <el-option label="短信" value="短信"></el-option>

                    </el-select>
                </el-form-item>

            </el-form>
            <div>
                <el-button type="primary" @click="baocun()">保存</el-button>
            </div>
        </el-card>

    </div>
</template>
<script>
import service from '@/request';

export default {
    data() {
        return {
            email: "",
            rid: "",
            count: "",
            form: {},
            list2: [],
            list3: [],
            list: [{
                value1: "",
                value2: "",
                value3: "",
                value4: "",
                guanxi: ""
            }],
        }
    },
    mounted() {
        if (this.$route.query.id) {
            this.rid = this.$route.query.id
            this.getdetail()
        } else {
            this.rid = ""
        }
    },
    methods: {
       async getdetail(){
const res=await service.get("/userSegments/"+this.rid);
console.log(res)
this.form=res.data;
this.list=res.data.selectConditions
this.count=res.data.memberCount
this.list.forEach((el,index)=>{
    this.changelistt(el,index)
    this.changelistt1(el,index)
})
        },
      async  baocun(){
console.log(JSON.stringify(this.list))
if (!this.form.segmentName) {
                this.$message.warning("请输入人群名称")
                return
            }
            if (!this.form.pushStatus) {
                this.$message.warning("请输入推送设置")
                return
            }
            let istrue = true;
            this.list.forEach(el => {
                if (el.value1 == '' || el.value2 == '' || el.value3 == '' || el.value4 == '') {
                    istrue = false
                    return
                }
            })
            if (istrue == false) {
                this.$message.warning("条件不全")
                return

            }
            let conditions=[];
            this.list.forEach(el=>{
                conditions.push({
                    field:el.value2,
                    value:el.value4,
                    operator:el.value3,
                    logicOperator:el.guanxi
                })
            })

this.form.conditions=(conditions);
this.form.selectConditions=(this.list);
this.form.memberCount=this.count;
if(!this.$route.query.id){
    const res=await service.post("/userSegments/saveUserSegments",this.form);
        if(res.code == 200){
            this.$message.success("成功");
            this.$router.go(-1)
        }

}else{
    const res=await service.put("/userSegments",this.form);
        if(res.code == 200){
            this.$message.success("成功");
            this.$router.go(-1)
        }
    
}
     
        },
        async jisuancount() {
            if (!this.form.segmentName) {
                this.$message.warning("请输入人群名称")
                return
            }
            if (!this.form.pushStatus) {
                this.$message.warning("请输入推送设置")
                return
            }
            let istrue = true;
            this.list.forEach(el => {
                if (el.value1 == '' || el.value2 == '' || el.value3 == '' || el.value4 == '') {
                    istrue = false
                    return
                }
            })
            if (istrue == false) {
                this.$message.warning("条件不全")
                return

            }
            let conditions=[];
            this.list.forEach(el=>{
                conditions.push({
                    field:el.value2,
                    value:el.value4,
                    operator:el.value3,
                    logicOperator:el.guanxi
                })
            })
            
            const res = await service.post("/userSegments/countUserSegments", {
                segmentName: this.form.segmentName,
                pushStatus: this.form.pushStatus,
                conditions:(conditions)
            })
            console.log(res);
            this.count=res.data

        },
        addtianjian(item, index) {
            this.list[index].guanxi = "且";
            this.list.push({
                value1: "",
                value2: "",
                value3: "",
                value4: "",
                guanxi: ""
            })
        },
        changeguanxi(item, index) {
            if (this.list[index].guanxi == "且") {
                this.list[index].guanxi = "或"
            } else {
                this.list[index].guanxi = "且"
            }

            this.list = JSON.parse(JSON.stringify(this.list))
        },
        changelist1(e, f) {
            this.list[f].value3 = "";
            if (e.value2 == 'recent30DaysPurchaseCount'
                || e.value2 == 'recent30DaysPurchaseAmount'
                || e.value2 == '近30日支付异常次数'
                || e.value2 == "用户信用评分"
                || e.value2 == "近30日异地登录次数"
                || e.value2 == "密码强度"
            ) {
                this.list3 = [{
                    label: "大于",
                    value: ">"
                },
                {
                    label: "等于",
                    value: "="
                },
                {
                    label: "小于",
                    value: "<"
                }
                ]
            } else if (e.value2 == 'shoppingGender') {
                this.list3 = [ {
                    label: "等于",
                    value: "="
                },
                ]
            } else if (e.value2 == 'userActivityLevel') {
                this.list3 = [{
                    label: "等于",
                    value: "="
                }]
            } else if (e.value2 == '会员等级') {
                this.list3 = [{
                    label: "银卡",
                    value: "银卡"
                }, {
                    label: "金卡",
                    value: "金卡"
                }, {
                    label: "钻卡",
                    value: "钻卡"
                },]
            }
        },
        changelistt1(e, f) {
        
            if (e.value2 == 'recent30DaysPurchaseCount'
                || e.value2 == 'recent30DaysPurchaseAmount'
                || e.value2 == '近30日支付异常次数'
                || e.value2 == "用户信用评分"
                || e.value2 == "近30日异地登录次数"
                || e.value2 == "密码强度"
            ) {
                this.list3 = [{
                    label: "大于",
                    value: ">"
                },
                {
                    label: "等于",
                    value: "="
                },
                {
                    label: "小于",
                    value: "<"
                }
                ]
            } else if (e.value2 == 'shoppingGender') {
                this.list3 = [ {
                    label: "等于",
                    value: "="
                },
                ]
            } else if (e.value2 == 'userActivityLevel') {
                this.list3 = [{
                    label: "等于",
                    value: "="
                }]
            } else if (e.value2 == '会员等级') {
                this.list3 = [{
                    label: "银卡",
                    value: "银卡"
                }, {
                    label: "金卡",
                    value: "金卡"
                }, {
                    label: "钻卡",
                    value: "钻卡"
                },]
            }
        },
        changelist(e, f) {
            console.log(e, f)
            this.list[f].value2 = "";
            this.list[f].value3 = "";
            if (e.value1 == '人口属性') {
                this.list2 = [{
                    label: "用户性别",
                    value: "shoppingGender"
                }, {
                    label: "活跃度",
                    value: "userActivityLevel"
                }, {
                    label: "会员等级",
                    value: "会员等级"
                }]
            } else if (e.value1 == '行为属性') {
                this.list2 = [
                    {
                        label: "近30日购买次数",
                        value: "recent30DaysPurchaseCount"
                    },
                    {
                        label: "近30日购买金额",
                        value: "recent30DaysPurchaseAmount"
                    },

                ]
            } else if (e.value1 == '风险控制') {
                this.list2 = [
                    {
                        label: "近30日支付异常次数",
                        value: "近30日支付异常次数"
                    },
                    {
                        label: "用户信用评分",
                        value: "用户信用评分"
                    },
                    {
                        label: "近30日异地登录次数",
                        value: "近30日异地登录次数"
                    },
                    {
                        label: "密码强度",
                        value: "密码强度"
                    },
                    {
                        label: "近x日是否申请贷款",
                        value: "近x日是否申请贷款"
                    },

                ]

            }
        },
        changelistt(e, f) {
            console.log(e, f)
            if (e.value1 == '人口属性') {
                this.list2 = [{
                    label: "用户性别",
                    value: "shoppingGender"
                }, {
                    label: "活跃度",
                    value: "userActivityLevel"
                }, {
                    label: "会员等级",
                    value: "会员等级"
                }]
            } else if (e.value1 == '行为属性') {
                this.list2 = [
                    {
                        label: "近30日购买次数",
                        value: "recent30DaysPurchaseCount"
                    },
                    {
                        label: "近30日购买金额",
                        value: "recent30DaysPurchaseAmount"
                    },

                ]
            } else if (e.value1 == '风险控制') {
                this.list2 = [
                    {
                        label: "近30日支付异常次数",
                        value: "近30日支付异常次数"
                    },
                    {
                        label: "用户信用评分",
                        value: "用户信用评分"
                    },
                    {
                        label: "近30日异地登录次数",
                        value: "近30日异地登录次数"
                    },
                    {
                        label: "密码强度",
                        value: "密码强度"
                    },
                    {
                        label: "近x日是否申请贷款",
                        value: "近x日是否申请贷款"
                    },

                ]

            }
        }
    }
}
</script>
<style scoped>
.addym {
    width: 100%;
    height: 100%;
}
</style>
<style>
.el-divider--vertical {
    margin: 0px 13px !important;
}
</style>